<template>
<el-container class="home-container">
  <el-header>
      <div>
        <img src="../assets/logo.png" alt="">
        <span>后台管理系统</span>
      </div>
     <el-button @click="loginOut" type="info">退出</el-button>
  </el-header>
  <el-container>
    <el-aside :width="taggleStatus?'64px':'200px'">
        <!-- 点击折叠 -->
        <div class="toggle-button" @click="toggleBtn">|||</div>
        <!-- unique-opened只展开一个                                                    router 默认为true -->
    <el-menu active-text-color="#409eff" unique-opened :collapse="taggleStatus"
     :collapse-transition="false" router :default-active="itemStatus">
      <!-- 加引号是为了把数字变成字符串 -->
      <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
        <template slot="title">
          <i :class="iconObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
        
        <el-menu-item :index="'/' +son.path" v-for="son in item.children" :key="son.id" @click="saveActive('/' +son.path)">
          <template slot="title" >
            <i class="el-icon-s-grid"></i>
            <span>{{son.authName}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data() {
        return {
            menuList: [],
            iconObj: {
                '125': 'el-icon-user',
                '103': 'el-icon-timer',
                '101': 'el-icon-shopping-bag-1',
                '102': 'el-icon-s-order',
                '145': 'el-icon-office-building'
            },
            // 是否展开
            taggleStatus: false,
            // 当前点击项标记
            itemStatus: ''
        }
    },
    created(){
        this.getMenu()
        this.itemStatus = window.sessionStorage.getItem('default-active')
    },
    methods: {
        loginOut() {
            window.sessionStorage.clear()
            this.router.push('/login')
        },
        toggleBtn() {
            this.taggleStatus = !this.taggleStatus
        },
        // 更改当前点击项
        saveActive(active) {
            window.sessionStorage.setItem('default-active', active)
            this.itemStatus = active
        },
        async getMenu(){
            const {data: res} = await this.$http.get('menus')
            if( res.meta.status !==200) return this.$message.error('获取菜单失败')
            this.menuList = res.data
            
        }
    }
}
</script>
<style lang='less' scoped>
.home-container{
    height: 100%;
}
   .el-header{
       display: flex;
       justify-content:space-between;
       align-items: center;
       color: #fff;
       background: #373d41;
       font-size: 20px;
       img{
           width: 50px;
       }
       div{
           display: flex;
           align-items: center;
       }
   }
   .el-aside{
       background: #333744;
   }
  .el-main{
      background: #eaedf1;
  }
  .toggle-button{
      background: #4a5064;
      font-size: 10px;
      line-height: 45px;
      color: white;
      text-align: center;
      cursor: pointer;
      letter-spacing: 1em;
  }
</style>